<style lang="less" scoped>
  @import './caps.less';
</style>

<template>
  <div class="page container caplist">
    <a-card
      title="帽子"
      :bordered="false"
      class="card-content"
    >
      <div class="caplist-main">
        <article class="caplist-summary">
          <p>帽子是在为项目，组织或公司发言时发表评论的一种正式，经过验证的方式。每个用户可能有多顶帽子，在发表评论或发送私信时，可以选择其中一顶帽子。</p>
        </article>

        <section class="caplist-body">
          <a-table
            :columns="columns"
            :data-source="data"
            :pagination="false"
          >
            <v-cap
              slot="cap"
              slot-scope="cap"
              :name="cap"
            />
          </a-table>
        </section>

        <footer class="caplist-foot">
          <a-button
            size="large"
            type="primary"
            @click="go2CertCap"
          >
            认证帽子
          </a-button>
        </footer>
      </div>
    </a-card>
  </div>
</template>

<script>
import Cap from '~/components/cap'

const columns = [
  {
    title: '用户',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '邮箱账号',
    dataIndex: 'cap',
    key: 'cap',
    scopedSlots: { customRender: 'cap' },
  },
  {
    title: '个人主页',
    dataIndex: 'homepage',
    key: 'homepage',
  },
]

const data = [
  {
    key: '1',
    name: '张三',
    cap: '超级管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
  {
    key: '2',
    name: '里斯',
    cap: '社区管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
  {
    key: '3',
    name: '王五',
    cap: '板块管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
  {
    key: '4',
    name: '张三',
    cap: '超级管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
  {
    key: '5',
    name: '里斯',
    cap: '社区管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
  {
    key: '6',
    name: '王五',
    cap: '板块管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
  {
    key: '7',
    name: '张三',
    cap: '超级管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
  {
    key: '8',
    name: '里斯',
    cap: '社区管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
  {
    key: '9',
    name: '王五',
    cap: '板块管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
  {
    key: '10',
    name: '张三',
    cap: '超级管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
  {
    key: '11',
    name: '里斯',
    cap: '社区管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
  {
    key: '12',
    name: '王五',
    cap: '板块管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
  {
    key: '13',
    name: '张三',
    cap: '超级管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
  {
    key: '14',
    name: '里斯',
    cap: '社区管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
  {
    key: '15',
    name: '王五',
    cap: '板块管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
  {
    key: '16',
    name: '张三',
    cap: '超级管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
  {
    key: '17',
    name: '里斯',
    cap: '社区管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
  {
    key: '18',
    name: '王五',
    cap: '板块管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
  {
    key: '19',
    name: '张三',
    cap: '超级管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
  {
    key: '20',
    name: '里斯',
    cap: '社区管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
  {
    key: '21',
    name: '王五',
    cap: '板块管理员',
    homepage: 'https://hub.baai.ac.cn/u/123456',
  },
]

export default {
  components: {
    'v-cap': Cap,
  },

  data () {
    return {
      data,
      columns,
    }
  },

  created () {
    // console.log(this.$store.state)
  },

  methods: {
    go2CertCap () {
      this.$router.push('/caps/cert')
    },
  },
}
</script>
